@use 'sass:string';

$num: 20;
$directions: 'top', 'right', 'bottom', 'left';
$types: 'margin', 'padding';

@function substring($string, $start, $length: null) {
  $result: '';
  $end: if($length == null, string.slice($string), $start + $length - 1);

  @for $i from $start through $end {
    $result: $result + string.slice($string, $i, $i);
  }

  @return $result;
}

@each $type in $types {
  $str-type: substring($type, 1, 1);

  @for $i from 1 through $num {
    .#{$str-type}-#{$i} {
      #{$type}: #{$i}px;
    }
    @each $direction in $directions {
      $str-direction: substring($direction, 1, 1);

      .#{$str-type}#{$str-direction}-#{$i} {
        #{$type}-#{$direction}: #{$i}px;
      }
    }
  }
}
